<!--
 * @Description: index
 * @Author: rendc
 * @Date: 2022-09-19 09:47:42
 * @LastEditors: rendc
 * @LastEditTime: 2022-09-20 09:59:40
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>index</title>
  <!-- 外部样式表 -->
  <!-- <link rel="stylesheet" href="./style.css"> -->
  <style>
    /* 在style标签的第一行导入外部样式表 */
    @import './style.css';

    #myDiv999 {
      /* color: blue; */
      font-size: 12px !important;
    }
  </style>
</head>

<body>
  <div id="myDiv999">
    999
  </div>
  <!-- 行内样式表 -->
  <div id="helloDiv" class="helloDiv">hello</div>
  <div style="color:blue;font: size 20px;" id="div">world</div>
  <div id="div2">!</div>
  <p class="name desc">张三</p>
  <p class="age desc">23岁</p>
  <div id="myDiv">
    <div>div</div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
  </div>
  <input id="nameInput" type="text">
  <div style="font-size: 20px;">
    <div id="em">
      <div id="em1">em1
      </div>
    </div>
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
<!--  内联样式表  -->
<style>
  /* #helloDiv {
    color: red;
  } */
  #em {
    margin: 1rem;
    border: 1px solid red;
    padding: 10px;
    /* 上右下左 */
    padding: 10px 11px 12px 13px;
    padding: 10px 11px 13px;
    padding: 11px 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    height: 160px;
  }

  #em1 {
    border: 1px solid greenyellow;
    height: 50%;
  }

  .helloDiv {
    color: rgb(0, 0, 0);
    color: rgb(255, 0, 0);
    color: rgb(0, 255, 0);
    color: rgb(0, 0, 255);
    color: rgb(255, 255, 255);
    color: rgba(0, 0, 0, 0.5);
    color: rgba(255, 0, 0, 0.5);
    color: rgba(0, 255, 0, 0.5);
    color: rgba(0, 0, 255, 0.5);
    color: rgba(255, 255, 255, 0.5);
    color: #000000;
    color: #000;
    color: #999;
    color: #667;
    color: #ff0000;
    color: #f00;
    color: #00ff00;
    color: #0000ff;
    color: #ffffff;
    color: #ffffff00;
    color: #ffffffff;
    color: #00000000;
    color: #000000ff;
    color: crimson;
    color: darkcyan;
    /* color: blue; */
  }

  div {
    color: antiquewhite;
    width: 100vw;
  }

  #div {
    color: greenyellow !important;
  }

  p,
  div {
    font-size: 40px;
  }

  #nameInput:focus {
    color: red;
  }

  /* 组合选择器 普遍选择器 */
  /* #myDiv>* {
    color: bisque;
  } */
  /* 组合选择器 >  */
  /* #myDiv>p {
    color: bisque;
  } */
  /*  标签选择器 */
  /* p {
    font-size: 30px;
  }

  div {
    font-size: 40px;
  } */
  .name:hover {
    color: red;
  }

  /* .name {
    color: aquamarine;
  }

  .desc {
    font-size: 40px;
  }

  #div {
    color: #000;
    font-size: 30px;
  } */
</style>

</html>